<template>
  <view class="page">
    <!-- 导航栏 -->
    <tui-navigation-bar title="我的订单" inTabBar></tui-navigation-bar>

    <my-container :data="orderList" refresh :back="false" @refresh="getOrderList">
      <view class="container">
        <section class="order-list" v-for="order in orderList" :key="order.id" @click="$open('/order/order-detail', 'nt', { data: order })" hover-jump="hover-jump">
          <view class="header">
            <view class="width-60">订单编号 : {{ order.ordersn }}</view>
            <view class="id">{{ order.ordertype_bz }}</view>
          </view>
          <view class="content">
            <view class="content-item">
              <span>房台号</span>
              <span>{{ order.roomid }}</span>
            </view>

            <view class="content-item">
              <span>金额</span>
              <span class="text-price">{{ order.paymoney }}</span>
            </view>
          </view>
          <view class="foot">
            <view :class="order.isget === 1 ? 'gold-btn' : ''">订单时间 : {{ $utils.parseTime(order.time) }}</view>
          </view>
        </section>
      </view>
    </my-container>

    <!-- loading -->
    <my-loading ref="loading"></my-loading>

    <my-tabbar></my-tabbar>
  </view>
</template>

<script>
export default {
  data() {
    return {
      orderList: null
    }
  },
  filters: {
    // 是否退款（ 0:否,  1:是 ）
    refundType(val) {
      return val === 0 ? '' : '已退款'
    }
  },
  onShow() {
     uni.hideTabBar()
    this.handleInit()
  },
  onPullDownRefresh() {
    this.$refs.loading.open()
    this.handleInit()
    setTimeout(() => {
      uni.stopPullDownRefresh()
      this.$refs.loading.close()
    }, 300)
  },
  methods: {
    handleInit() {
      this.initLoginInfo().then(async () => {
        await this.getOrderList()
      })
    },
    /**
     *  查询我的订单列表
     */
    getOrderList() {
      const baseParam = this.getBase(['token', 'usertoken', 'selectuniacid'])
      if (!baseParam) return Promise.reject()

      console.param('查询我的订单列表', baseParam)
      this.$refs.loading.open()
      this.$api
        .getOrderList(baseParam)
        .then(res => {
          console.res('查询我的订单列表', res)
          this.orderList = this.$format(res, 'data')
          return Promise.resolve(res)
        })
        .catch(err => {
          console.err('查询我的订单列表', err)
          this.errMsg(err, '查询我的订单列表失败')
          return Promise.reject(err)
        })
        .finally(() => {
          this.$refs.loading.close()
        })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.order-list {
  position: relative;
  background: #333952;
  color: $color-primary-grey-text;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.4);
  margin-bottom: 15px;
  font-size: $font-size-xs;

  .header {
    @include is-flex(row, space-between, center, nowrap);
    @include border-bottom;
    padding: 10px 15px;
    font-size: $font-size-xs;

    .id {
      color: $gold;
    }
  }
  .content {
    display: flex;
    flex-flow: column nowrap;
    padding: 10px 5px;
    .content-item {
      @include is-flex(row, space-between, center, nowrap);
      padding: 5px 10px;
    }
    .title {
      font-size: $font-size-base;
    }
    .time {
      color: $color-primary-grey-text;
      padding: 2px 0;
    }
    .price {
      color: $gold;
    }
  }
  .foot {
    padding: 0 15px;
    color: $gold;
    font-size: $font-size-xs;
    min-height: 30px;
    background: #292f45;
    color: $color-primary-bg-text;

    @include is-flex(row, flex-end, center, nowrap);
    .gold-btn {
      font-size: $font-size-xs;
      padding: 3px 10px;
      border-radius: 10px;
    }
  }
  .is-used {
    position: absolute;
    right: 10px;
    bottom: 10px;
  }
}
</style>
